import { useEffect, useRef } from "react";
import React from "react";
import "./map.css";
import * as echarts from "echarts";
import { Getmap } from "../../../request/api";
// function Map() {
//   let warp = useRef(null);

//   let fun = (adcode, name) => {

//     Getmap(adcode).then((res) => {
//       var myChart = echarts.init(warp.current);
//       echarts.registerMap(name, res.data);
//       let option={
//         visualMap: {
//           min: 800,
//           max: 50000,
//           text: ['High', 'Low'],
//           realtime: false,
//           calculable: true,
//           inRange: {
//             color: ['lightskyblue', 'yellow', 'orangered']
//           }
//         },
//         series: [
//           {
//             name: name,
//             type: 'map',
//             map: name,
//             label: {
//               show: true
//             },
//             data: [
//               { name: '中西区', value: 20057.34 },
//               { name: '湾仔', value: 15477.48 },
//               { name: '东区', value: 31686.1 },
//               { name: '南区', value: 6992.6 },
//               { name: '油尖旺', value: 44045.49 },
//               { name: '深水埗', value: 40689.64 },
//               { name: '九龙城', value: 37659.78 },
//               { name: '黄大仙', value: 45180.97 },
//               { name: '观塘', value: 55204.26 },
//               { name: '葵青', value: 21900.9 },
//               { name: '荃湾', value: 4918.26 },
//               { name: '屯门', value: 5881.84 },
//               { name: '元朗', value: 4178.01 },
//               { name: '北区', value: 2227.92 },
//               { name: '大埔', value: 2180.98 },
//               { name: '沙田', value: 9172.94 },
//               { name: '西贡', value: 3368 },
//               { name: '离岛', value: 806.98 }
//             ],
//             // 自定义名称映射
//             nameMap: {
//               'Central and Western': '中西区',
//               Eastern: '东区',
//               Islands: '离岛',
//               'Kowloon City': '九龙城',
//               'Kwai Tsing': '葵青',
//               'Kwun Tong': '观塘',
//               North: '北区',
//               'Sai Kung': '西贡',
//               'Sha Tin': '沙田',
//               'Sham Shui Po': '深水埗',
//               Southern: '南区',
//               'Tai Po': '大埔',
//               'Tsuen Wan': '荃湾',
//               'Tuen Mun': '屯门',
//               'Wan Chai': '湾仔',
//               'Wong Tai Sin': '黄大仙',
//               'Yau Tsim Mong': '油尖旺',
//               'Yuen Long': '元朗'
//             }
//           }

//         ]
//       }
//       myChart.setOption(option);
//     });
//   };

//   useEffect(() => {
//     fun(100000, "中国");
//   }, []);
//   return (
//     <div className="box2">
//       <div
//         className="map"
//         style={{ width: "500px", height: "500px" }}
//         ref={warp}
//       ></div>
//     </div>
//   );
// }

// export default Map;

function Map() {
  let warp = useRef(null);
  let mapstart = useRef([
    {
      adcode: 100000,
      name: '中国'
    }
  ])
  let fun = (adcode, name) => {
    window.addEventListener('resize', function() {
      myChart.resize();
    });
    var myChart = echarts.init(warp.current);
    Getmap(adcode).then((res) => {
      console.log(res);
      echarts.registerMap(name, res.data);
      let option = {
        visualMap: {
          min: 800,
          max: 50000,
          text: ["High", "Low"],
          realtime: false,
          calculable: true,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },
        series: [
          {
            name: name,
            type: "map",
            map: name,
            label: {
              show: true,
            },
            data: res.data.features.map((item) => {
              return {
                name: item.properties.name,
                value: item.properties.childrenNum,
                adcode:item.properties.adcode
              };
            }),
            // 自定义名称映射
          },
        ],
      };
      myChart.setOption(option);
      myChart.on("click", function (e) {
        console.log(e);
        mapstart.current.push({
          name: e.data.name,
          adcode: e.data.adcode
        })
        fun(e.data.adcode, e.data.name);
      });
      myChart.on('contextmenu', function (e) {
        e.event.stop()
        // 移除最后一个区域记录，返回上一级区域
        mapstart.current.pop()
        let { adcode, name } = mapstart.current[mapstart.current.length - 1]
        // 调用地图接口
        fun(adcode, name)
      });
    });
  };
  useEffect(() => {
    fun(100000, "中国");
    
  },[]);
  return (
    <div className="box2">
      <div
        className="map"
        style={{ width: "500px", height: "500px" }}
        ref={warp}
      ></div>
    </div>
  );
}

export default Map;
